<!-- 出库单详情弹窗 -->
<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}`">
    <el-space direction="vertical">
      <el-descriptions :column="1" title="货物信息" border>
        <el-descriptions-item width="300" label="商品名称">{{ drawerProps.row!.goodsItems?.[0].goodsName }}</el-descriptions-item>
        <el-descriptions-item width="300" label="数量">{{ drawerProps.row!.goodsItems?.[0].count }}</el-descriptions-item>
        <el-descriptions-item width="300" label="计量单位">{{
          drawerProps.row!.goodsItems?.[0].measureUnit
        }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="1" title="出库信息" border>
        <el-descriptions-item width="300" label="流动类型">
          <el-tag v-if="drawerProps.row.circulationType === 0" type="success">入库</el-tag>
          <el-tag v-if="drawerProps.row.circulationType === 1" type="success">出库</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="300" label="流动细节">
          <el-tag v-if="drawerProps.row.circulationDetail === 3" type="success">调拨出库</el-tag>
          <el-tag v-if="drawerProps.row.circulationDetail === 4" type="warning">退货出库</el-tag>
          <el-tag v-if="drawerProps.row.circulationDetail === 5" type="danger">取货出库</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="300" label="状态">
          <el-tag v-if="drawerProps.row.circulationStatus === 0" type="success">进行中</el-tag>
          <el-tag v-if="drawerProps.row.circulationStatus === 1" type="info">已完成</el-tag>
          <el-tag v-if="drawerProps.row.circulationStatus === 2" type="danger">已取消</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="300" label="创建时间">{{ drawerProps.row!.createTime }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        v-if="
          drawerProps.row.circulationDetail === 3 ||
          (drawerProps.row.circulationDetail === 4 && userStore.userInfo.userRole === 4)
        "
        :column="1"
        title="调拨目的库房信息"
        border
      >
        <el-descriptions-item width="300" label="库房名称">{{ aimWareInfo.warehouseName }}</el-descriptions-item>
        <el-descriptions-item width="300" label="库房地址">{{ aimWareInfo.warehouseAddress.addressString }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        v-if="drawerProps.row.circulationDetail === 4 && userStore.userInfo.userRole === 3"
        :column="0"
        title="供应商信息"
        border
      >
        <el-descriptions-item width="300" label="供应商名称">{{ vendorInfo.vendorName }}</el-descriptions-item>
        <el-descriptions-item width="300" label="供应商地址">{{ vendorInfo.vendorAddress.addressString }}</el-descriptions-item>
      </el-descriptions>
    </el-space>
  </el-drawer>
</template>

<script setup lang="ts" name="DetailDrawer">
import { ref } from "vue";
import { Warehouse } from "@/api/interface";
import { getVendor, getWarehouse } from "@/api/modules/warehouse";
import { useUserStore } from "@/stores/modules/user";

// 库房角色 3-中心库房 4-分站库房
const userStore = useUserStore();

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Warehouse.ResEntryOutList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 供应商信息
const vendorInfo = ref({
  vendorName: "",
  vendorAddress: { addressString: "" }
});

// 获取供应商名称和地址
const getVendorInfo = async () => {
  try {
    const response = await getVendor({ goodsId: drawerProps.value.row?.goodsItems?.[0].goodsId ?? 0 });
    vendorInfo.value = response.data;
  } catch (error) {
    // 处理错误情况
    console.error("获取供应商信息失败", error);
  }
};

// 货物调拨目的库房信息
const aimWareInfo = ref({
  warehouseName: "",
  warehouseAddress: { addressString: "" }
});

// 获取货物调拨目的库房名称和地址
const getAimWareInfo = async () => {
  try {
    const response = await getWarehouse({ circulationId: drawerProps.value.row?.circulationId ?? 0, resAim: 1 });
    aimWareInfo.value = response.data;
  } catch (error) {
    // 处理错误情况
    console.error("获取库房信息失败", error);
  }
};

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  if (drawerProps.value.row.circulationDetail == 4 && userStore.userInfo.userRole == 3) {
    getVendorInfo();
  } else if (
    drawerProps.value.row.circulationDetail == 3 ||
    (drawerProps.value.row.circulationDetail == 4 && userStore.userInfo.userRole == 4)
  ) {
    getAimWareInfo();
  }
};

defineExpose({
  acceptParams
});
</script>
